<template>
  <div>
    <button @click="add">点击我+1</button>
    <button @click="minus">点击我-1</button>
    <button @click="even">点击我偶数+1</button>
    <button @click="odd">点击我奇数-1</button>
    <button @click="random">点击我+随机数</button>
    <button @click="delay">点击我一秒之后+1</button>
    <h1>{{count}}</h1>
    <h2>{{girl}}</h2>
    <!-- 表单元素 -->
    <input type="text" :value="count" @input="handler">
  </div>
</template>

<script>
//分别暴露:mapState是Vuex提供一个辅助函数，可以让你快速将仓库的数据映射为组件数据使用
import {mapState,mapGetters} from 'vuex';
export default {
  name: "",
  //缓存机制
  //计算属性:利用已有的属性与属性值，搞出一个新的属性与属性值
  computed:{
      //mapState是一个函数：这个函数需要传递数组|对象，而且这个函数会返回一个对象
      //进行拷贝
      ...mapState(['count',"students"]),
      ...mapGetters(['girl'])
  },
  methods:{
    //点击+1按钮的回调
    add(){
      //遵守vuex规则,组件派发action
      //$store属性:提供组件可以获取仓库数据属性---state
      //$store属性，提供组件可以派发action的方法---dispatch
      this.$store.dispatch("addOne");
    },
    //点击-1按钮的回调
    minus(){
     //派发action
     //dispatch方法，里面传递的是仓库中action对应函数名字
      this.$store.dispatch("minusOne");
    },
    //点击偶数+1的回调
    even(){
      //派发action
      this.$store.dispatch("evenOne");
    },
    //奇数减去1回调
    odd(){
      //派发action
      this.$store.dispatch('oddOne')
    },
    //点击我累加一个随机数字
    random(){
      //第一个参数:相应action名字  第二参数:就是给相应action函数传递参数 没有第三个、第四个参数
      this.$store.dispatch('randomOne',Math.random());
    },
    //一秒以后累加1
    delay(){
      //派发action
      this.$store.dispatch('delayOne');
    },
    handler(event){
      this.$store.dispatch('model',event.target.value);
    }
  },
};
</script>

<style scoped>
</style>
